<template>
  <div>
    <!-- 头部 -->
    <div class="exa-nav">
      <div class="exa-nav-body">
        <div @click="changeNav(key)" :class="key == menu_index ? 'exa-nav-item active' : 'exa-nav-item'" v-for="(item,key) in nav_list" :key="key">
          <!-- {{item.name}} -->
          <router-link :to="item.url">{{item.name}}</router-link>
          <!--  @click.native="changeRouter(key)" -->
        </div>
        <div class="exa-nav-bg" :style="navStyle()"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: { menu_index: {} },
  data() {
    return {
      nav_list: [
        { name: '品牌网站建设', url: '/index/fuwu/website' },
        { name: '微信定制开发', url: '/index/fuwu/wechat' },
        { name: 'APP定制开发', url: '/index/fuwu/app' },
        { name: 'VR全景营销', url: '/index/fuwu/vr' }
      ]
    }
  },
  mounted() {
    // console.log(this.menu_index)
    window.onresize = () => {
      this.$forceUpdate()
    }
  },
  methods: {
    //切换导航
    changeNav(key) {
      this.nav_index = key
      // this.$emit('change', this.nav_list[key])
    },
    //设置导航条选中样式
    navStyle() {
      var key = this.menu_index
      //获取屏幕宽度
      var width = document.body.clientWidth
      if (width > 1200) {
        var style = 'left:' + key * 160 + 'px'
      } else {
        // eslint-disable-next-line no-redeclare
        var style = 'left:' + ((key * width) / 4 + (width / 4 / 2 - 10)) + 'px'
      }
      return style
    }
  }
}
</script>

<style scoped>
.active {
  /* background: red; */
  color: #fff !important;
}
.active > a {
  color: #fff !important;
}
.exa-nav {
  width: 100%;
  height: 70px;
  background: #fff;
  box-shadow: 1px 1px 38px 0px rgba(242, 243, 243, 0.75);
}
.exa-nav-body {
  width: 1200px;
  height: 70px;
  line-height: 70px;
  margin: auto;
  position: relative;
  overflow: hidden;
  user-select: none;
}
.exa-nav-item {
  display: inline-block;
  text-align: center;
  font-size: 18px;
  position: relative;
  z-index: 1;
  height: 100% !important;
  width: 160px !important;
  cursor: pointer;
  transition: all 0.1s linear;
  background: transparent;
}
/* 定义按钮的大小 */
.exa-nav-item a {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
}
.exa-nav-body .active {
  /* background-color: red; */
  color: #fff;
}
.router-link-exact-active.link-active {
  color: #fff !important;
}

.exa-nav-bg {
  position: absolute;
  width: 160px;
  height: 70px;
  background: #d6151a;
  top: 0;
  left: 0;
  transition: all 0.1s linear;
}
@media screen and (max-width: 1200px) {
  .exa-nav {
    width: 100%;
    box-shadow: none;
    border-bottom: 1px solid #e1e1e1;
    box-sizing: border-box;
  }
  .exa-nav-body {
    width: 100%;
    white-space: nowrap;
    overflow-x: auto;
  }
  /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
  .exa-nav-body::-webkit-scrollbar {
    width: 3px;
    /*滚动条宽度*/
    height: 0px;
    /*滚动条高度*/
  }
  .exa-nav-body .active {
    color: #d51519;
  }
  .exa-nav-bg {
    width: 20px;
    height: 2px;
    bottom: 0;
    top: 68px;
    left: 10px;
  }
}
</style>